<template>
  <div id="main" class="appMainWrapper">
    <el-backtop target=".appMainWrapper" :right="84" :bottom="100">
      <div class="backTop">
        UP
      </div>
    </el-backtop>
    <xum-pre-loader :loading="loading"/>
    <xum-search v-model="searchShow"/>
    <xum-category-menu v-model="categoryMenuShow"/>
    <card-drawer v-model="drawer.cardDrawer" key='card'/>
    <collect-drawer v-model="drawer.collectDrawer" key="collect"/>
    <user-drawer v-model="drawer.userDrawer" key="user" @success="handleUserSuccess"/>

    <page-header id="header" class="header" :style="headerStyle"
                 @mainMenuToggle="mainMenuToggle" @categoryMenuToggle="categoryMenuToggle" @searchToggle="searchToggle"
                 @cardToggle='cardToggle' @collectToggle='collectToggle' @userToggle='userToggle'/>

    <div class="contentPage" :style="contentPaddingTop">
      <slot/>
    </div>

    <page-footer/>
    <page-footer2/>
  </div>
</template>

<script>
import PageHeader from '@/views/part/index/PageHeader'
import PageFooter from '@/views/part/index/PageFooter'
import PageFooter2 from '@/views/part/index/PageFooter2'
import CardDrawer from '@/views/part/drawer/CardDrawer'
import CollectDrawer from '@/views/part/drawer/CollectDrawer'
import UserDrawer from '@/views/part/drawer/UserDrawer'
import XumPreLoader from '@/components/wrapper/part/XumPreLoader'
import XumSearch from '@/components/wrapper/part/XumSearch'
import XumCategoryMenu from '@/components/wrapper/part/XumCategoryMenu'

export default {
  name: 'AppMainWrapper',
  props: {
    transparentHeader: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  components: {
    XumCategoryMenu,
    XumSearch,
    XumPreLoader,
    'page-header': PageHeader,
    'page-footer': PageFooter,
    'page-footer2': PageFooter2,
    'card-drawer': CardDrawer,
    'collect-drawer': CollectDrawer,
    'user-drawer': UserDrawer
  },
  data: () => {
    return {
      searchShow: false,
      categoryMenuShow: false,
      drawer: {
        cardDrawer: false,
        collectDrawer: false,
        userDrawer: false
      }
    }
  },
  methods: {
    mainMenuToggle () {
      this.$message.success('mainMenuToggle')
    },
    categoryMenuToggle () {
      this.categoryMenuShow = true
    },
    searchToggle () {
      this.searchShow = true
    },
    cardToggle () {
      this.drawer.cardDrawer = true
    },
    collectToggle () {
      this.drawer.collectDrawer = true
    },
    userToggle () {
      this.drawer.userDrawer = true
    },
    handleUserSuccess (name) {
      if (name === 'login') {
        this.drawer.userDrawer = false
      }
    }
  },
  computed: {
    headerStyle () {
      return this.transparentHeader ? {} : {
        background: 'white'
      }
    },
    contentPaddingTop () {
      return this.transparentHeader ? {} : {
        paddingTop: '66px'
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      const headerMain = document.getElementById('header')
      window.onscroll = function () {
        if (window.pageYOffset >= 70) {
          headerMain.classList.add('whiteHeader')
        } else {
          headerMain.classList.remove('whiteHeader')
        }
      }
    })
  }
}
</script>

<style lang="scss">
  #main {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    height: 100%;
    overflow: scroll;

    .backTop {
      height: 100%;
      width: 100%;
      background-color: #b2b5b6aa;
      border-radius: 6px;
      box-shadow: 0 0 6px rgba(0,0,0, .12);
      text-align: center;
      line-height: 40px;
      color: #1989fa;
    }

    $headerTime:1s;

    .header{
      transition: $headerTime;
    }

    .whiteHeader{
      background: white;
      transition: $headerTime;
      box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    }

    .contentPage{
      width: 100%;
      height: auto;
    }

  }
</style>
